<template>
    <div>
        <!-- 计算属性 -->
        <!-- <p>{{ codestr.replace(/d/g, 'D') }}</p>
        <p>{{
            codestr.substring(0, codestr.indexOf('d')) +
            codestr.substr(codestr.indexOf('d'), 1).toUpperCase() +
            codestr.substr(codestr.indexOf('d') + 1)
        }}</p> -->

        <!-- 使用methods 方法完成 -->
        <!-- <p>{{ uppercaseFn() }}</p> -->

        <!-- 使用计算属性完成 -->
        <!-- <p>{{ uppercaseCom }}</p>
        <p><button @click="editCodeFn">点击事件</button></p> -->

        <!-- 计算属性和methods区别 -->
        <p>{{ uppercaseCom }}</p>
        <p>{{ uppercaseCom }}</p>
        <!-- methods -->
        <p>{{ uppercaseFn() }}</p>
        <p>{{ uppercaseFn() }}</p>
    </div>
</template>

<script>
// 计算属性:
// 作用: 解决模板中代码过于沉重的问题,让模板代码变得更加轻巧一些
// 计算属性的特点: 当计算属性中依赖的值发生改变,计算属性就会重新计算,得到一个新的值
// 注意:计算属性是属性不是方法,调用使用不加()
// 注意: 计算属性必须有返回值,返回值就是计算属性的值


// 计算属性和methods 区别:
// 计算属性有缓存,meithods 没有缓存
// 当计算属性的值和上一次的值一样, 那么计算属性就会使用后上一次缓存的值, 而不会重新计算
// 所以 计算属性可以帮助提升浏览器性能

export default {
    data() {
        return {
            codestr: 'abcdefg'
        }
    },
    computed: { // 定义计算属性
        uppercaseCom() {
            console.log('计算属性');
            return this.codestr.substring(0, this.codestr.indexOf('d')) +
                this.codestr.substr(this.codestr.indexOf('d'), 1).toUpperCase() +
                this.codestr.substr(this.codestr.indexOf('d') + 1)
        }
    },
    methods: { // 定义方法的
        uppercaseFn() {
            console.log('methods方法');
            return this.codestr.substring(0, this.codestr.indexOf('d')) +
                this.codestr.substr(this.codestr.indexOf('d'), 1).toUpperCase() +
                this.codestr.substr(this.codestr.indexOf('d') + 1)
        },
        // 修改codeStr
        editCodeFn() {
            console.log('this-homeview', this);  // 当前组件homeview组件实例
            this.codestr = 'aaaadbbb'
        }
    },
    directives: { // 定义指令的

    }
}
</script>
<style scoped></style>